「Movable Type」と一致するもの

結論から言うと、.htaccessのRewriteRuleによるリダイレクトを設定しているとHTTPS接続でBASIC認証が効かない状態になるみたいです…
時代の流れに乗ってSSL化作業を済ませ、前の記事にて電車猫ブログのHTTPS化が完了したと書いたのに一件落着ではなかったですねorz

本題の前に、前提条件のお話を。

電車猫ブログのHTTPS化をしたのは良いのですが、HTTPでアクセスして来てもらっては常時SSL化とはならず、セキュリティ的なメリットが半減するわけですよ。
Google先生に聞いたところ、.htaccessのRewriteRuleでリダイレクトさせれば良いということが分かりました。
.htaccessでのリダイレクトの目的は2つあります。

  1. HTTPでアクセスした人をHTTPSの同じパスのページにリダイレクトさせる(常時SSL化の趣旨)
  2. www.traincat.netでアクセスしてもtraincat.netにアクセスさせる(SEO的な目的)

以下のページを参考に、.htaccessを書きました。

m630.net - httpからhttpsへのリダイレクトしてwwwありなしを統一する
デジ研 - 常時SSL導入の注意点とSSLページのインデックスまでにかかる時間 - HSTSを設定しましょう

.htaccessの内容は以下になります。

RewriteEngine on

# HTTPの場合のリダイレクト.
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

# www.traincat.netの場合のリダイレクト
RewriteCond %{HTTP_HOST} ^(www\.traincat\.net)(:80)?
RewriteRule ^(.*) https://traincat.net/$1 [R=301,L]

# HSTSの設定
Header set Strict-Transport-Security "max-age=31536000" env=HTTPS

これによって、例えば
 http://traincat.net/foo/bar/
 http://www.traincat.net/foo/bar/
 https://www.traincat.net/foo/bar/
は最終的に以下のURLへリダイレクトされます。
 https://traincat.net/foo/bar/

HSTSにも対応することで、SSLに対応していることをブラウザや検索エンジンのクローラーに通知させます。
上記.htaccessをルートディレクトリに配置することでリダイレクトに対応できました。

ここからが本題になります。
上記.htaccessをアップロードした後、BASIC認証ありのページにアクセスし、動作検証を試みたところ、問答無用で403エラーになりました。
SSL化する前はアクセスできていましたし、以前の.htaccessファイルに戻したらBASIC認証ができるので、確実に今回の設定に問題がある訳ですね。
この問題を解決する為に日本語のサイトだけでは見つからず、Stack Overflowなどの海外サイトまで調べましたが、なかなか正解にたどり着けず、手間取りました。
しかし、結局日本語のソースで役に立ちそうなページを発見しました!

blog20100901 - [memo] .htaccess の RewriteRule で Basic 認証が効かない問題 (0x21e)

BASIC認証をかけている.htaccess(先ほどの.htaccessとは別ファイル)を修正することで対応できるようです。
赤字が追記箇所になります。

ErrorDocument 401 "Unauthorized Access"
RewriteEngine off

SSLRequireSSL
AuthUserFile /home/users/lovecats/hoge/basic-area/.htpasswd
AuthGroupFile /dev/null
AuthName "Password Required"
AuthType Basic
require valid-user
order deny,allow

詳しい内容は前述のブログに記載されているので、ざっくりと解説を。
BASIC認証とリダイレクト(RewriteRule)の相性は悪いようなので、RewriteEngineをoffにします。
ErrorDocument 401 "Unauthorized Access"があることで、HTTPSでもBASIC認証が効くようになるようです。
その代わり、上記で記載したリダイレクトは無効になりますが、制限ページの役割を考えるとSEO的なリダイレクトは気にしなくても大丈夫でしょう。
ただ、HTTPアクセスでBASIC認証ページに訪問されてしまうと、リダイレクトが無効になってるので、HTTPS化した意味がなくなってしまいます。それに対応する為に、HTTPS接続に限定する「SSLRequireSSL」を記述しました。
※なお「ErrorDocument 401 "Unauthorized Access"」の部分については、401エラー用のHTMLを用意できるのであれば、例えば「ErrorDocument 401 /error-pages/401.html」のようにしても良いと思います。「ErrorDocument 401 "Unauthorized Access"」の設定だと、BASIC認証に失敗した場合は「Unauthorized Access」と1行テキストが出力させるだけになります。

常時SSL化によりBASIC認証が無効になってしまったら、HTTPSとHTTPの共存もやむなしかと思っていたので、この様な逃げ道があって良かったです。
常時SSL化の流れになっている今後は同じ問題が発生することが多くなるのではないかなと思っていますので、ご参考になりましたら幸いです。

電車猫ブログHTTPS化完了

最近の常時SSL化の流れもあり、電車猫ブログをSSL化したかったのですが、ついに実現できました。
それも、気付いたらロリポップがLet's Encryptの無料SSLに対応してくれたお陰です。

LOLIPOP!レンタルサーバー - 2017/07/11 無料の独自SSLがご利用いただけるようになりました!

ロリポップサイトに手順書がありますし、ロリポップの設定については記載を省きますが、5分足らずでHTTPSでのアクセスを可能にしてくれました。
ところが、HTTPS接続で電車猫ブログを確認するとスタイルシートや画像の読み込みに問題があることが発覚。
HTTPS接続のサイトなのにHTTPのURLが混在していることで発生していました。

そこで、Movable Typeのダッシュボードにログインし、以下の手順でHTTPをHTTPSに書き換えました。
※以下の例では電車猫ブログのURLを提示していますが、自サイトのドメインに読み替えて作業をしてください。

・URLのHTTP→HTTPS化
[システム]→[ウェブサイト]→[設定]→[全般]より[全般設定]画面を開く。
[公開パス]より[ウェブサイトURL]を「http://traincat.net/」から「https://traincat.net/」に変更し、[変更を保存]ボタンを押下する。

・検索/置換機能によるHTTP→HTTPS化
[システム]→[ブログ]→[ツール]→[検索/置換]より[検索/置換]画面を開く。
[検索]テキストエリアに「http://traincat.net/」を入力し、[検索]ボタンを押下する。
[検索/置換]ラジオボタンをチェックし、[置換]テキストエリアに「https://traincat.net/」を入力する。
置換対象の記事のチェックボックス、または全て選択のチェックボックスをチェックした後、[選択したものを対象に置換]ボタンを押下する。
同様の対応を[検索/置換]画面上部にある、[記事]タブだけではなく、[コメント]、[トラックバック]、[ウェブページ]、[テンプレート]、[ユーザー]タブにも実施する。

・ブログの再構築
更新ボタンをクリックし、すべてのファイルを再構築する。

・ブラウザでの確認
HTTPSでブログにアクセスし、問題なく表示されるか確認する。
特にスタイルシート、画像のURLやリンクの遷移を確認し、HTTPに戻ってアクセスしていないか確認する。

いかがでしたでしょうか。(※最近流行りのキュレーションサイトの定型文を書いてみた)

上記手順を実施することで、ロリポップ+Movable Typeでは、1時間程度でHTTPS化が可能です。
いや~素晴らしい。

今後はSSL化した電車猫ブログをよろしくお願いしますm(_ _)m

前回の記事の続きです。
月別記事リスト、カテゴリ別記事リスト、および別途作成した全エントリーの各テンプレートにはOGPの設定がされていなかったので、設定を追加することにしました。

ダッシュボード→[ブログ]→[デザイン]→[テンプレート]→[アーカイブテンプレート]の[月別記事リスト]と[カテゴリ別リスト]のテンプレートを開き、「</head>」の前の行に以下の設定を加えました。
※赤字の部分が注意が必要の部分です。

<!-- Open Graph Protocol -->
<meta property="og:type" content="article">
<meta property="og:locale" content="<$mt:BlogLanguage setvar="blog_lang"$><mt:If name="blog_lang" eq="ja">ja_JP<mt:else><$mt:Var name="blog_lang"$></mt:If>">
<meta property="og:title" content="<$mt:ArchiveTitle encode_html="1"$>アーカイブ - <$mt:BlogName encode_html="1"$>">
<meta property="og:url" content="<$MTCanonicalURL$>">
<meta property="og:description" content="<$mt:ArchiveTitle encode_html="1"$>アーカイブ - <$mt:BlogName encode_html="1"$>">
<meta property="og:site_name" content="<$mt:BlogName encode_html="1"$>">
<meta property="og:image" content="<$mt:SupportDirectoryURL with_domain="1" encode_html="1"$>theme_static/rainier/img/siteicon-sample.png">
<!-- Metadata -->
<meta itemprop="description" content="<$mt:ArchiveTitle encode_html="1"$>アーカイブ - <$mt:BlogName encode_html="1"$>">
<link itemprop="url" href="<$MTCanonicalURL$>">
<link itemprop="image" href="<$mt:SupportDirectoryURL with_domain="1" encode_html="1"$>theme_static/rainier/img/siteicon-sample.png">

descriptionの部分はもうちょっと工夫できそうな気がしますが、一旦タイトルと同じにしてみました。
「<$mt:SupportDirectoryURL with_domain="1" encode_html="1"$>theme_static/rainier/img/siteicon-sample.png」の部分は利用するスタイルによって変わる可能性もあるので、流用される方はご注意ください。

続いて、ダッシュボード→[ブログ]→[デザイン]→[テンプレート]→[アーカイブテンプレート]の[全エントリー]のテンプレートを開き、「</head>」の前の行に以下の設定を加えました。

<!-- Open Graph Protocol -->
<meta property="og:type" content="article">
<meta property="og:locale" content="<$mt:BlogLanguage setvar="blog_lang"$><mt:If name="blog_lang" eq="ja">ja_JP<mt:else><$mt:Var name="blog_lang"$></mt:If>">
<meta property="og:title" content="全エントリー - <$mt:BlogName encode_html="1"$>">
<meta property="og:url" content="<$MTCanonicalURL$>">
<meta property="og:description" content="全エントリー - <$mt:BlogName encode_html="1"$>">
<meta property="og:site_name" content="<$mt:BlogName encode_html="1"$>">
<meta property="og:image" content="<$mt:SupportDirectoryURL with_domain="1" encode_html="1"$>theme_static/rainier/img/siteicon-sample.png">
<!-- Metadata -->
<meta itemprop="description" content="全エントリー - <$mt:BlogName encode_html="1"$>">
<link itemprop="url" href="<$MTCanonicalURL$>">
<link itemprop="image" href="<$mt:SupportDirectoryURL with_domain="1" encode_html="1"$>theme_static/rainier/img/siteicon-sample.png">

<$mt:ArchiveTitle encode_html="1"$>」だと「全エントリー」と出力できなかったので、修正しています。

前回と同様、TwitterとFacebookでのOGP表示を以下で確認しました。

Twitter Developers - Card Validator
開発者向けFacebook - デバッガー

これで更にOGP対応ぽいブログができましたということで∠( ̄∧ ̄)

Twitter、Facebook、mixi等でブログ記事のリンクを張られたときの為に、もっと早く設定を修正すべきだったとちょっと後悔してます。

Webアクセス解析を確認したところ、SNSから当ブログの記事が紹介されていることを見つけました。
確認してみると、単なるリンクではなく真っ白な画像と説明が微妙に表示されてるではありませんか。
色々調べてみると、OGPの設定が関係していることが分かりました。
OGPについては以下のサイトの説明をご参照くださいませ。

ferret [フェレット] - Facebook・TwitterのOGP設定方法まとめ

ダッシュボード→[ブログ]→[デザイン]→[テンプレート]からメインページ(index.html)と個別記事のテンプレートを確認したところ、「<meta property="og:○○" content="~" />」のタグが含まれてました。
月別アーカイブや別途追加した全アーカイブのテンプレートからリンクが張られるということは少ないので、デフォルトの状態でも基本的な対応はされていると。
では、何故画像が真っ白になるかと言いますと、og:imageに設定されているURLの画像ファイルがデフォルトのままなのであたり前田のクラッカーということで。
画像を以下の画像に差し替えました。

サイト画像

あまりに単純すぎるだろというツッコミはありまくりかもしれませんが、絵心はなかったので、フリー素材を使い電車猫ロゴを作成しました…
ただ、Twitterで記事をサマリ表示する為には設定が足りないのと、どうせならfaviconも設定したいと欲が出てしまいまして、テンプレートの修正箇所を探しました。
ダッシュボード→[ブログ]→[デザイン]→[テンプレート]→[テンプレートモジュール]→[HTMLヘッダー]に以下の設定を加えれば良いそうです。

<!-- favicon -->
<link rel="shortcut icon" href="(faviconのURL)" type="image/vnd.microsoft.icon" />
<link rel="icon" href="(faviconのURL)" type="image/vnd.microsoft.icon" />
<!-- Twitter card -->
<meta name="twitter:card" content="summary" />

「(faviconのURL)」の部分はICOファイルのURLを指定してください。
電車猫ブログのfaviconは、以下の記事を参考にし、オンラインでフリー素材の画像ファイルをICOファイルに変換しました。

Forgot the Milk. - Faviconをサクサク作ってくれる8つの Faviconジェネレータ サイト

TwitterとFacebookでのOGP表示を確認するには以下のデバッグサイトを利用すると便利です。

Twitter Developers - Card Validator
開発者向けFacebook - デバッガー

og:imageとTwitterカードを設定すると、それっぽいサイトに見えますね(´∀`)(笑)
色々なSNSからリンクされるくらい重要と思われる記事を書かないと無用の長物となってしまいますので頑張ります∠( ̄∧ ̄)

Movable Type 6.2.2からMovable Type 6.3にアップグレード(アップデート?)しました。
定期的にスクリプトの更新をしないと更新手順を忘れてしまう&ますます面倒くさいと思って更新しなくなるので(^_^;)

前回更新時のMTOS5.2.9から5.2.13アップデート→6.2.2アップグレードのときのようなトラブルに巻き込まれることなく、上書き更新で対応できました。
…っと書きたかったのですが、ロリポップFTPの問題によりファイルの大量アップロード・ダウンロードに失敗する事象に悩まされ、Movable Typeの大量ファイルのバックアップに苦戦してましたorz
流石におかしいだろうと思って調べてみたら、ありましたよ解決方法が…

谷 元博のブログ - FFFTPのファイル転送が途中でエラーになってしまう現象

最近のFFFTPは明示的にFTPSを使用するように設定できますが、それが原因でロリポップのファイル大量転送時にエラーとなっていたとは…
ネットワークスペシャリストを学習していて思う原因の推定は以下の様なものでしょうか?

・平文で処理できるFTPに比べ、暗号化と復号があるFTPSは処理負荷が高くなる。
・大量にファイル転送されるとサーバリソースを大量に使用する。
・他のユーザの転送に影響を及ぼさない為、特定時間に一定のファイル数以上の転送が発生した場合にアクセス制限している。

解決方法としては、ロリポップFTPサーバとクライアントとの間にSSLアクセラレータを導入し、SSL(FTPS)の暗号化と復号負荷を減らす構成にするのは如何でしょうか?>ロリポップの中の人
そのような構成になっていた上で、大量ファイルの転送を弾く設定にしている可能性は否定できませんね(^_^;)

2016年11月06日追記:
Movable Type 6.3からMovable Type 6.3.2へのアップデートも上書き保存で対応できました。